<template>
  <div class="signin">
    <div class="header">
      <van-nav-bar title="签到" left-arrow @click-left="onClickLeft">
        <template #right>
          <van-icon name="replay" />
        </template>
      </van-nav-bar>
    </div>
    <div class="signin-content"></div>
    <div class="signin-card-box">
      <div class="stack-wrapper">
        <stack ref="stack" :pages="someList" :stackinit="stackinit"></stack>
      </div>
    </div>
    <div class="signin-interaction">
      <img src="@/assets/images/signin/move-icon.png" alt class="photo" />
      <img src="@/assets/images/signin/share-icon.png" alt class="photo" />
      <img src="@/assets/images/signin/spot-icon.png" alt class="photo" />
      <img src="@/assets/images/signin/comment-icon.png" alt class="photo" />
    </div>
  </div>
</template>

<script>
import stack from "@/components/stack";
import photo1 from "@/assets/images/signin/cardone.png";
import photo2 from "@/assets/images/signin/cardtwo.png";
import photo3 from "@/assets/images/signin/cardthree.png";
import photo4 from "@/assets/images/signin/cardfour.png";
import photo5 from "@/assets/images/signin/cardfive.png";
export default {
  data() {
    return {
      someList: [],
      stackinit: {
        visible: 3
      }
    };
  },
  components: {
    stack
  },
  created() {},
  mounted() {
    this.someList = [
      {
        html: `<img src="${photo1}" alt="01">`
      },
      {
        html: `<img src="${photo2}" alt="01">`
      },
      {
        html: `<img src="${photo3}" alt="01">`
      },
      {
        html: `<img src="${photo4}" alt="01">`
      },
      {
        html: `<img src="${photo5}" alt="01">`
      },
      {
        html: `<img src="${photo1}" alt="01">`
      },
      {
        html: `<img src="${photo3}" alt="01">`
      }
    ];
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss">
[class*="van-hairline"]::after {
  position: static;
}

.van-nav-bar {
  background-color: rgba(0, 0, 0, 0.2) !important;
  .van-nav-bar__title {
    color: #ffffff !important;
  }
}
.van-nav-bar__text {
  color: #ffffff !important;
}
.van-nav-bar .van-icon {
  color: #ffffff !important;
}
</style>
<style scoped lang="scss" scoped>
.signin {
  overflow: hidden;
}
.signin-content {
  position: fixed;
  top: -20px;
  left: 0;
  width: 100%;
  height: 330px;
  background: url(~@/assets/images/signin/bgcone.png) no-repeat center;
  background-size: auto 100%;
}

.signin-card-box {
  height: 400px;
  width: 80%;
  margin: 100px auto;
  position: relative;
}
.stack-wrapper {
  margin: 0 auto;
  position: relative;
  z-index: 1000;
  width: 100%;
  height: 100%;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.controls {
  position: relative;
  width: 100%;
  text-align: center;
  display: flex; /*Flex布局*/
  display: -webkit-flex; /* Safari */
  justify-content: space-around;
  margin: 0 auto;
  margin-top: 50px;
}
.signin-interaction {
  display: flex;
  width: 70%;
  margin: 0 auto;
  justify-content: space-evenly;
  align-items: flex-end;
  .photo:nth-child(1) {
    width: 21px;
    height: 21px;
  }
  .photo:nth-child(2) {
    width: 38px;
    height: 38px;
  }
  .photo:nth-child(3) {
    width: 38px;
    height: 38px;
  }
  .photo:nth-child(4) {
    width: 21px;
    height: 21px;
  }
}
</style>
